import { useEffect } from "react";
import styles from "./index.module.less";
import { initShader } from "./utils";
import HelloWorld from "./components/hello-world";

const drawSimplePoint = () => {
  const VERTEX_SHADER_SOURCE = `
    void main() {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
    }
  `;

  const FRAGMENT_SHADER_SOURCE = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `;
  const ctx = document.getElementById(
    "canvas-simple-point"
  ) as HTMLCanvasElement;
  const gl = ctx?.getContext("webgl") as WebGLRenderingContext;

  initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

  gl.drawArrays(gl.POINTS, 0, 1);
  // gl.drawArrays(gl.LINES, 0, 1);
  // gl.drawArrays(gl.TRIANGLES, 0, 1);
};

const WebGLDemo = () => {
  useEffect(() => {
    drawSimplePoint();
  }, []);
  return (
    <div className={styles.container}>
      <canvas id="canvas-simple-point" />
      <HelloWorld />
    </div>
  );
};

export default WebGLDemo;
